<template>
  <a-modal
    v-model:visible="formVisible"
    :title="getTitle"
    @ok="handleModalOK"
    @cancel="handleModalCancel"
    :confirm-loading="confirmLoading"
  >
    <a-form :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-item v-bind="validateInfos.dictId" label="所属字典">
        <a-tree-select
          v-model:value="formData.dictId"
          showSearch
          treeNodeFilterProp="name"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="dictTreeData"
          :field-names="{
            children: 'children',
            label: 'name',
            value: 'id',
          }"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item v-bind="validateInfos.itemLabel" label="字典项名称">
        <a-input v-model:value="formData.itemLabel" />
      </a-form-item>
      <a-form-item v-bind="validateInfos.itemValue" label="字典项值">
        <a-input v-model:value="formData.itemValue" />
      </a-form-item>
      <a-form-item label="状态" v-bind="validateInfos.status">
        <a-radio-group v-model:value="formData.status">
          <a-radio :value="1">正常</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="formData.sorts" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
export default {
  name: 'DictItemModal',
};
</script>
<script setup lang="ts">
import { ref, computed, onMounted, watch, unref } from 'vue';
import { getDictAllList, addDictItem, updateDictItem } from '/@/api/sys/system';
import { deepMerge } from '/@/utils/index';
import { Form, message } from 'ant-design-vue';
const useForm = Form.useForm;

const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emit = defineEmits(['ok', 'update:visible']);
const formVisible = ref(false);

const rules = ref({
  dictId: [{ required: true, trigger: 'change', message: '请选择所属字典' }],
  itemLabel: [{ required: true, trigger: 'change', message: '字典项名称' }],
  itemValue: [{ required: true, trigger: 'change', message: '字典项值' }],
  status: [{ required: true, trigger: 'change', message: '请选择状态' }],
});

const formData = ref({
  id: undefined,
  dictId: undefined,
  itemLabel: '',
  itemValue: '',
  status: 1,
  sorts: undefined,
});

const dictTreeData = ref([]);
const confirmLoading = ref<boolean>(false);

const { resetFields, validate, validateInfos } = useForm(formData, rules);
const getTitle = computed(() => (formData.value.id == undefined ? '新增字典项' : '编辑字典项'));

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
    if (val) {
      resetFields();
      deepMerge(formData.value, props.data);
    }
  },
);

const fetchData = async () => {
  dictTreeData.value = await getDictAllList();
};

onMounted(() => {
  fetchData();
});
const handleModalCancel = () => {
  formVisible.value = false;
};
const handleModalOK = async () => {
  try {
    confirmLoading.value = true;
    await validate();
    if (formData.value.id) {
      await updateDictItem(unref(formData));
    } else {
      await addDictItem(unref(formData));
    }
    message.success('保存成功');
    formVisible.value = false;
    emit('ok', true);
  } finally {
    confirmLoading.value = false;
  }
};
</script>